<template>
  <div class="home">
    <Navbar class="homenavbar">
      <div slot="center">购物街</div>
    </Navbar>
    <Bscroll class="content" ref="scroll" :probeType="3" @scrollchange="setbacktop" @scrollup="getnewdata" :upload="true">
      <!-- <tabcontrol :titles="['综合', '新品', '销量']" @tabbarclick="getindex" ref="tabcontrol" class="fixed" v-show="istabshow"></tabcontrol> -->

      <homeswiper :banners="banners" @swiperload="getoffset"></homeswiper>
      <homechild :recommends="recommends"></homechild>
      <homefreture></homefreture>
      <tabcontrol :titles="['综合', '新品', '销量']"  @tabbarclick="getindex" ref="tabcontrol"  ></tabcontrol>
      <goodslist :goodsitem="goods[currenttype].list"></goodslist>
    </Bscroll>
    <BackTop @click.native="getposition" v-show="isshow"></BackTop>
  </div>
</template>

<script>
import Navbar from '../../components/common/navbar/navbar.vue'
import { getHomeMultidata, getHomeGoods } from '../../network/home.js'
import homeswiper from './childhome/homeswiper.vue'
import homechild from './childhome/homechild.vue'
import homefreture from './childhome/homefreture.vue'
import tabcontrol from '../../components/content/tabControl/TabControl.vue'
import goodslist from '../../components/content/goods/GoodsList.vue'
import Bscroll from '../../components/common/scroll/scroll.vue'
import BackTop from '../../components/content/backTop/BackTop.vue'
export default {
  name: 'Home',
  data() {
    return {
      banners: [],
      recommends: [],
      goods: {
        pop: { page: 0, list: [] },
        new: { page: 0, list: [] },
        sell: { page: 0, list: [] }
      },
      list: [],
      currenttype: 'pop',
      isshow: false,
      offset: 0,
      isshowtab: false
    }
  },
  components: {
    Navbar,
    homeswiper,
    homechild,
    homefreture,
    tabcontrol,
    goodslist,
    Bscroll,
    BackTop
  },
  created() {
    this.getHomeMultidata(), this.getHomeGoods('pop'), this.getHomeGoods('new'), this.getHomeGoods('sell')
  },
  mounted() {
    const refresh = this.debounce(this.$refs.scroll.imgrefresh, 500)
    this.$bus.$on('scrollrefresh', () => {
      refresh()
    })
  },
  methods: {
    getoffset() {
      this.offset = this.$refs.tabcontrol.$el.offsetTop
      console.log(this.offset)
    },
    debounce(func, dealy) {
      let timer = null
      return function(...args) {
        if (timer) clearTimeout(timer)
        timer = setTimeout(() => {
          func.apply(this, args)
        }, dealy)
      }
    },
    getnewdata() {
      console.log('上啦加载更多')
      this.getHomeGoods(this.currenttype)
      this.$refs.scroll.finishPullUp()
      this.$refs.scroll.scroll.refresh()
    },
    setbacktop(position) {
      this.isshow = -position.y > 1000
      this.isshowtab = -position.y > this.offset
      
    },
    getposition() {
      // console.log('输出位置')
      this.$refs.scroll.gototop()
    },
    getindex(tabindex) {
      console.log(tabindex)
      if (tabindex === 0) {
        this.currenttype = 'pop'
      } else if (tabindex === 1) {
        this.currenttype = 'new'
      } else if (tabindex === 2) {
        this.currenttype = 'sell'
      }
    },
    getHomeMultidata() {
      getHomeMultidata().then(res => {
        this.banners = res.data.data.banner.list
        this.recommends = res.data.data.recommend.list
      })
    },
    getHomeGoods(type) {
      const page = this.goods[type].page + 1
      getHomeGoods(type, page).then(res => {
        // console.log(res)
        this.goods[type].list.push(...res.data.data.list)
        this.goods[type].page += 1
      })
    }
  }
}
</script>

<style scoped>
.home {
  /* padding-top: 44px; */
  position: relative;
}
.homenavbar { 
  background: pink;
  color: white;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  z-index: 9;
 } 

.content {
  /* height: 100%; */
  /* overflow: hidden; */
  position: absolute;
  top: 44px;
  bottom: 49px;
  left: 0;
  right: 0;
}
.fixedA {
  position: relative;
  
  z-index: 9;
}
</style>
